<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=5" >
<meta http-equiv="X-UA-Compatible" content="IE=7/8/9/10" >
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7/8/9" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" >
<script type="text/javascript">
	 if(!-[1,] && document.documentMode == '5'){
    alert('\u60A8\u7684\u6D4F\u89C8\u5668\u7248\u672C\u6E32\u67D3\u6A21\u5F0F\u4E0D\u6B63\u786E\uFF0C\u8BF7\u4F7F\u7528360\u6216\u8C37\u6B4C\u7B49\u6D4F\u89C8\u5668\uFF0C\u6216\u6253800800\u627E IT \u5E2E\u4F60\u628A\u6D4F\u89C8\u5668\u7684\u602A\u5F02\u6E32\u67D3\u6A21\u5F0F\u6539\u4E3A\u6807\u51C6\u6E32\u67D3\u6A21\u5F0F');
 }
</script>

<title>概况</title>

<link type="text/css" rel="stylesheet" href="./css/common.css" />
<link type="text/css" rel="stylesheet" href="./css/index.css" />
<link type="text/css" rel="stylesheet" href="./css/fontCss/font-awesome.min.css" />

</head>

<body>

<div class="container">
	
	<div class="header clearfix">
		<div class="headerLogo fl"></div>

		<ul class="headerList fr">
			<li><a href="#">资源管理</a></li>
			<li><a href="#">平台管理</a></li>
			<li><a href="#">用户admin</a></li>
		</ul>
	</div><!-- end of header -->

	<div class="content clearfix">
		<div class="menus">
			<ul class="menusCont">
				<li>
					<a href="#" class="menusCont_a">
						<i class="fa fa-coffee"></i>概况
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-cloud"></i>云主机
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">实例</a>
						<a href="#">主机快照</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-database"></i>云硬盘
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">卷</a>
						<a href="#">硬盘快照</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-sitemap"></i>云网络
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">内部网络</a>
						<a href="#">内部FIP</a>
						<a href="#">路由</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-shield"></i>防火墙
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">防火墙</a>
						<a href="#">防火墙策略</a>
						<a href="#">防火墙规则</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-cog"></i>安全
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">密钥对</a>
						<a href="#">安全组</a>
						<a href="#">操作日志</a>
						<a href="#">通知列表</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>负载均衡
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">资源池</a>
						<a href="#">监控</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>自动伸缩
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>应用市场
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">环境</a>
						<a href="#">应用</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-bolt"></i>云监控
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
			</ul>
		</div><!--end of menus -->

		<div class="main">

			<div class="mainCont clearfix">
				<div class="demo w30 fl">
					<div class="demoToper"><i class="fa fa-user fa-lg"></i>账户信息</div>
					<div class="demo_cont">
						<p>邮箱：<span>xxxx@xuanyuan.com.cn</span></p>
						<p>用户名：<span>宝宝姓徐</span></p>
						<p>状态：<span>有效</span></p>
						<p>用户类型：<span>管理员</span></p>
					</div>
					<div class="demoToper"><i class="fa fa-user fa-lg"></i>合同期限</div>
					<div class="demo_cont">
						<p>市场部申请体验账号1<span>生效</span></p>
						<p>开始日期：<span>2016-11-17</span></p>
						<p>结束日期：<span>2016-12-31</span></p>
					</div>
				</div>
				<div class="demo w66 fl">
					<div class="demoToper"><i class="fa fa-area-chart fa-lg"></i>资源使用情况</div>
					<div class="demo_cont clearfix">
						<div id="ring" style="width:100%;height:272px;"></div>
					</div>
				</div>
			</div>

			<div class="mainCont clearfix">
				<div class="demo w98">
					<div class="demoToper"><i class="fa fa-pencil-square fa-lg"></i>最近操作</div>
					<table class="demo_table">
						<tr class="demo_tableTit">
							<td>资源名称</td>
							<td>资源ID</td>
							<td>操作</td>
							<td>状态</td>
							<td>操作时间</td>
							<td>用户</td>
						</tr>
						<tr class="demo_tableTxt">
							<td>用户neunn_01@neunn.com登录</td>
							<td>06333</td>
							<td>用户登录
							<td>成功</td>
							<td>2016-12-12 16:58:04</td>
							<td>neunn_01@neunn.com</td>
						</tr>
						<tr class="demo_tableTxt">
							<td>用户neunn_01@neunn.com登录</td>
							<td>06333</td>
							<td>用户登录
							<td>成功</td>
							<td>2016-12-12 16:58:04</td>
							<td>neunn_01@neunn.com</td>
						</tr>
						<tr class="demo_tableTxt">
							<td>用户neunn_01@neunn.com登录</td>
							<td>06333</td>
							<td>用户登录
							<td>成功</td>
							<td>2016-12-12 16:58:04</td>
							<td>neunn_01@neunn.com</td>
						</tr>
					</table>
				</div>
			</div>
			
		</div><!-- end of main -->
	</div><!-- end of content -->

</div><!-- end of container -->

<script type="text/javascript" src="./js/jquery-1.7.2-min.js"></script>
<script type="text/javascript" src="./js/jq/echarts.min.js"></script>
<script type="text/javascript" src="./js/jq/jquery.goup.min.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript">
window.onload=function(){
	reSize();
}

$(window).resize(function(){
	reSize();	  				  
});

function reSize(){
	var window_W = $(window).width();
	var window_H = $(window).height();
	console.log(window_W,window_H);
	$('.menus').css('min-Height',window_H-55);
	/*$('.main').width(window_W-243).css('min-width','857px');*/
}


//左侧菜单
$('.menusCont li a.menusCont_a').on('click',function(){
    $(this)/*.addClass('menusCont_on')*/.next().slideToggle('fast');
});
$('.menusCont li a').on('click',function(){
    $('.menusCont li a').removeClass('menusCont_on');
    $(this).addClass('menusCont_on');
});
</script>

</body>
</html>